<template>
  <div class="digit-clock" :title="dateZhcn">
    <p class="digit-clock-item">{{ time }}</p>
    <p class="digit-clock-item">{{ date }}</p>
  </div>
</template>
<script>
export default {
  name: 'DigitClock',
  data() {
    return {
      time: null,
      date: null,
      dateZhcn: null
    }
  },
  created() {
    setInterval(() => { this.updateTime() }, 1000)
  },
  methods: {
    updateTime() {
      const week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
      const weekzhcn = ['日', '一', '二', '三', '四', '五', '六']
      const current = new Date()
      const year = current.getFullYear()
      const month = current.getMonth() + 1
      const date = current.getDate()
      const weekday = current.getDay()
      const hour = current.getHours()
      let minute = current.getMinutes()
      let second = current.getSeconds()
      minute = minute < 10 ? `0${minute}` : minute
      second = second < 10 ? `0${second}` : second
      this.time = `${hour}:${minute}:${second}`
      this.date = `${year}-${month}-${date} ${week[weekday]}`
      this.datezhcn = `${year}年${month}月${date}日 星期${weekzhcn[weekday]}`
    }
  }
}
</script>
<style scoped>
.digit-clock-item {
  margin: 0;
  padding: 0;
}
.digit-clock {
  display:flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
}
</style>
